<template>
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">请选择最符合的举报原因</h4>
      <el-button type="primary" @click="submitReport">提交</el-button>
    </template>
    <el-form :model="formData" label-width="70px" :rules="rules" ref="formRef">
      <el-form-item label="举报原因" prop="feedbackTypeId">
        <el-radio-group v-model="formData.feedbackTypeId" class="radio-group">
          <el-radio v-for="item in reportList" :key="item.id" :value="item.id">
            {{ item.name }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="举报描述" prop="content">
        <el-input v-model="formData.content" type="textarea" placeholder="请输入举报描述" />
      </el-form-item>
      <el-form-item label="证据截图">
        <MultiImageUpload v-model="formData.files" limit="5" :showTip="false" />
      </el-form-item>
    </el-form>
    <!-- <el-radio-group v-model="radioValue">
      <el-collapse v-model="activeNames" @change="handleRadioChange">
        <el-collapse-item
          :title="item.name"
          :name="item.id"
          v-for="item in reportList"
          :key="item.id"
        >
          <el-radio v-for="one in item.children" :key="one.id" :value="one.id" class="radio-item">
            {{ one.name }}
          </el-radio>
        </el-collapse-item>
      </el-collapse>
    </el-radio-group> -->
  </el-drawer>
</template>

<script setup>
import { getFeedbackList, addFeedback } from "@/api/article";
import { REPORT_SOURCE } from "@/enums/aritcle/aritcle";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const formData = ref({
  feedbackTypeId: "",
  content: "",
  files: [],
});
const rules = ref({
  feedbackTypeId: [{ required: true, message: "请选择举报原因", trigger: "change" }],
  content: [{ required: true, message: "请输入描述", trigger: "blur" }],
});
const openDrawer = (comment, source) => {
  visible.value = true;
  getReportListFunc();
  formData.value.commentId = comment.id;
  formData.value.source = source;
};

const reportList = ref([]);
async function getReportListFunc() {
  try {
    const data = await getFeedbackList(40000);
    console.log(data, "data");
    reportList.value = data.filter((item) => item.level === 3);
    //reportList.value = buildTree(data);
    console.log(reportList.value, "reportList");
  } catch (error) {
    console.log(error, "error");
  }
}

const submitReport = async () => {
  console.log(formData.value, "formData");
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      let params = {
        feedbackTypeId: formData.value.feedbackTypeId,
        content: formData.value.content,
        files: JSON.stringify(formData.value.files),
        source: Number(formData.value.source),
      };
      if (formData.value.source == REPORT_SOURCE.COMMENT) {
        params.articleCommentId = Number(formData.value.commentId);
      }
      try {
        await addFeedback(params);
        ElMessage.success("举报成功");
        visible.value = false;
      } catch (error) {
        console.log(error, "error");
      }
    }
  });
};

defineExpose({
  openDrawer,
});
function buildTree(data, levelKey = "level", parentIdKey = "parentId", childrenKey = "children") {
  // 创建一个映射表，方便通过 parentId 快速查找节点
  const map = {};
  data.forEach((item) => {
    map[item[parentIdKey]] = map[item[parentIdKey]] || [];
    map[item[parentIdKey]].push({ ...item, [childrenKey]: [] });
  });

  // 构建树形结构
  const tree = [];
  data.forEach((item) => {
    if (item[levelKey] === 2) {
      // 如果 level 为 2，说明是根节点
      tree.push(map[item[parentIdKey]].find((node) => node.id === item.id));
    }
  });

  // 递归填充子节点
  function fillChildren(nodes) {
    nodes.forEach((node) => {
      if (map[node.id]) {
        node[childrenKey] = map[node.id];
        fillChildren(node[childrenKey]);
      }
    });
  }

  fillChildren(tree);

  return tree;
}
</script>
<style lang="scss" scoped>
.radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
